<template>
    <div class="tabs-content">
      <!-- 头部查询区域 -->
      <el-form
        :inline="true"
        :model="querylogindata"
        style="display: flex; justify-content: space-between; align: center; margin: 0px 20px">
        <div style="display: inline-block">
          <el-form-item>
            <el-input v-model="querylogindata.name" placeholder="请输入查询姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="querylogindata.workId" placeholder="请输入查询工号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryLogin()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getlogindataList()">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 内容区域 -->
      <el-table
          ref="logindataList"
          :data="logindataList"
          border
          height="73.5%"
          style="width: 97.5%"
          :header-cell-style="{height: '7vh'}"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
         >
          <el-table-column
              type="index"
              :index="getIndex"
              header-align="center"
              align="center"
              label="ID">
          </el-table-column>
          <el-table-column
              prop="workId"
              header-align="center"
              align="center"
              label="员工工号">
          </el-table-column>
          <el-table-column
              prop="empName"
              header-align="center"
              align="center"
              label="员工姓名">
          </el-table-column>
          <el-table-column
              prop="ip"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              label="IP地址">
          </el-table-column>
          <el-table-column
              prop="loginTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              label="登录时间">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <!-- <el-link type="danger" icon="el-icon-delete" @click="deleteHandle(scope.row)"></el-link> -->
                <el-button type="danger" @click="deleteHandle(scope.row)" style="width:25%;height:3.5vh">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
export default {
  name: 'LoginLog',
  data() {
    return {
      activeName: 'loginlog',
      querylogindata: { // 搜索框
        workId: '',
        name: ''
      },
      logindataList: [], // 获取的登录日记数据
      multipleSelection: [], // 选定的多个复选框对象
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.getlogindataList()
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    // 表格行高
    cellStyle() {
      return {
        height: '5vh',
        padding: '0'
      }
    },
    // 改变当前页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getlogindataList()
    },
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getlogindataList()
    },
    // 选择的复选框的数量
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取登录日志选定页码的数据
    getlogindataList() {
      this.getRequest('/log/login/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          console.log(resp)
          this.total = resp.total
          this.logindataList = resp.list
          console.log('this.logindataList', resp.list)
        }
      })
    },
    // 删除
    deleteHandle(data) {
      this.$confirm('此操作将永久删除【' + data.empName + '】员工的该条信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.deleteRequest('/log/login/' + data.id).then((resp) => {
          if (resp) {
            this.$message.success('删除成功')
            this.getlogindataList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 批量删除
    deleteMany() {
      this.$confirm('此操作将批量删除' + this.multipleSelection.length + '条员工的所有信息，是否继续', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?'
        this.multipleSelection.forEach((item) => {
          ids += 'ids=' + item.id + '&'
        })
        this.deleteRequest('/admin/emp/' + ids).then((resp) => {
          if (resp) {
            this.$message.success('删除成功')
            this.getothersDataList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    // 高级查询
    queryLogin() {
      this.getRequest(`/log/login/query?page=${this.currentPage}&size=${this.pageSize}&workId=${this.querylogindata.workId}&name=${this.querylogindata.name}`).then(resp => {
        if (resp) {
          this.logindataList = resp.data
          this.total = resp.data.length
          console.log('this.logindataList', this.logindataList)
        } else {
          console.log('错误')
        }
      })
    }
  }
}
</script>

<style>
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.tabs-content {
  width: 100%;
  height: 78vh !important;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 94% !important;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
